<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'myApp/style.css' %}">
    <meta charset="UTF-8">
    <title>MyVote</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <link href="{% static 'myApp/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'myApp/jquery-3.5.1/jquery-3.5.1.js' %}" ></script>
    <script src="{% static 'myApp/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">投票系统</a>
    </div>
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search" id="search_text">
        </div>
        <input type="button" class="btn btn-default" id="search_b" value="搜索"></input>
    </form>
        <ul class="nav navbar-nav">
            <li><a href="{% url 'myApp:index' %}">首页</a></li>
            <li class="active"><a href="{% url 'myApp:myvote' user.uid %}">我的投票</a></li>
        </ul>

        <div style="float: right">
        <ul class="nav navbar-nav">
            <li><a href="{% url 'myApp:logout' %}">注销</a></li>
        </ul>
        </div>
    </div>

</nav>
<div class="container">
<div class="row"  id="search">
{% if my_question_list %}
    {% for question in my_question_list %}

        <fieldset>
            <legend><h1>{{ question.question.question_text }}</h1></legend>
        <div class="col-md-5">
            <ul>
                {% for choice in question.question.choice_set.all %}
                    {% if choice in user.choice.all%}
                        <li class="list-group-item" style="color: #2aabd2">
                    {{ choice.choice_text }}--{{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
                    {% else %}
                        <li class="list-group-item">{{ choice.choice_text }}--{{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
<div id="{{ question.question.question_text }}" style="width: 50%;height:350px;float: right"></div>
                    <script type="text/javascript">
            var chartDom = document.getElementById('{{ question.question.question_text }}');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '投票统计',
            subtext: '{{ question.question.question_text }}',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                  {% for choice in question.question.choice_set.all %}
                  { value: {{ choice.votes }}, name: '{{ choice.choice_text }}' },
                  {% endfor %}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
        </script>
        </fieldset>
    {% endfor %}
{% else %}
    <p>你还未进行投票！</p>
{% endif %}
</div>
</div>
{#<input type="text" id="ss">#}
{#<button id="btn1">ddd</button>#}
{#<div id="xxx"></div>#}
{#<script>#}
{##}
{#     function xxx(){#}
{#         var txt= $("#ss").val()#}
{#         alert(txt)#}
{#         $.get("{% url 'myApp:index' %}?ss="+txt, function(result){#}
{#    $("#xxx").html(result);#}
{#  });#}
{#     }#}
{##}
{##}
{#      $("#btn1").click(function (){#}
{#           var txt= $("#ss").val()#}
            {#alert(txt)#}
{#          console.log(txt)#}
{#      });#}
{##}
{#</script>#}
<script>
    $("#search_b").click(function (){

        var key=$("#search_text").val()
        $.get("{% url 'myApp:search' %}?key="+key,
            function (result){$("#search").html(result);})

    })
</script>
</body>
</html>